
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont">&#xe70b;</i>
                    <div class="name">主页</div>
                    <div class="code">&amp;#xe70b;</div>
                    <div class="fontclass">.zhuye</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe710;</i>
                    <div class="name">奖杯</div>
                    <div class="code">&amp;#xe710;</div>
                    <div class="fontclass">.jiangbei</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe60e;</i>
                    <div class="name">NEW</div>
                    <div class="code">&amp;#xe60e;</div>
                    <div class="fontclass">.new</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe711;</i>
                    <div class="name">订单</div>
                    <div class="code">&amp;#xe711;</div>
                    <div class="fontclass">.order</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe712;</i>
                    <div class="name">设置</div>
                    <div class="code">&amp;#xe712;</div>
                    <div class="fontclass">.shezhi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe723;</i>
                    <div class="name">邮箱</div>
                    <div class="code">&amp;#xe723;</div>
                    <div class="fontclass">.youxiang</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe70a;</i>
                    <div class="name">出价竞拍</div>
                    <div class="code">&amp;#xe70a;</div>
                    <div class="fontclass">.chujiajingpai</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe706;</i>
                    <div class="name">所有商品</div>
                    <div class="code">&amp;#xe706;</div>
                    <div class="fontclass">.suoyou</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe71e;</i>
                    <div class="name">箭头</div>
                    <div class="code">&amp;#xe71e;</div>
                    <div class="fontclass">.jiantou</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe608;</i>
                    <div class="name">箭头向下</div>
                    <div class="code">&amp;#xe608;</div>
                    <div class="fontclass">.jiantouxiangxia</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe713;</i>
                    <div class="name">分期购物</div>
                    <div class="code">&amp;#xe713;</div>
                    <div class="fontclass">.fenqigouwu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe722;</i>
                    <div class="name">手机</div>
                    <div class="code">&amp;#xe722;</div>
                    <div class="fontclass">.shouji</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe727;</i>
                    <div class="name">删除</div>
                    <div class="code">&amp;#xe727;</div>
                    <div class="fontclass">.xiao10</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe700;</i>
                    <div class="name">购物车</div>
                    <div class="code">&amp;#xe700;</div>
                    <div class="fontclass">.gouwuche</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe701;</i>
                    <div class="name">相机</div>
                    <div class="code">&amp;#xe701;</div>
                    <div class="fontclass">.xiangji</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe702;</i>
                    <div class="name">SFSicon-移动端开奖</div>
                    <div class="code">&amp;#xe702;</div>
                    <div class="fontclass">.sfsiconyidongduankaijiang</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe724;</i>
                    <div class="name">密码</div>
                    <div class="code">&amp;#xe724;</div>
                    <div class="fontclass">.mima</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe714;</i>
                    <div class="name">安全</div>
                    <div class="code">&amp;#xe714;</div>
                    <div class="fontclass">.anquan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe609;</i>
                    <div class="name">箭头-向上</div>
                    <div class="code">&amp;#xe609;</div>
                    <div class="fontclass">.jiantouxiangshang</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe715;</i>
                    <div class="name">地址</div>
                    <div class="code">&amp;#xe715;</div>
                    <div class="fontclass">.dizhi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe728;</i>
                    <div class="name">银行卡</div>
                    <div class="code">&amp;#xe728;</div>
                    <div class="fontclass">.yinxingqia</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe716;</i>
                    <div class="name">资金账户</div>
                    <div class="code">&amp;#xe716;</div>
                    <div class="fontclass">.zijinzhanghu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe703;</i>
                    <div class="name">01-会员中心</div>
                    <div class="code">&amp;#xe703;</div>
                    <div class="fontclass">.01huiyuanzhongxin</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe707;</i>
                    <div class="name">所有</div>
                    <div class="code">&amp;#xe707;</div>
                    <div class="fontclass">.suoyou1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe704;</i>
                    <div class="name">一元购</div>
                    <div class="code">&amp;#xe704;</div>
                    <div class="fontclass">.yiyuangoujilu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe717;</i>
                    <div class="name">个人信息</div>
                    <div class="code">&amp;#xe717;</div>
                    <div class="fontclass">.gerenxinxi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe725;</i>
                    <div class="name">身份证</div>
                    <div class="code">&amp;#xe725;</div>
                    <div class="fontclass">.shenfenzheng</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe705;</i>
                    <div class="name">全部商品</div>
                    <div class="code">&amp;#xe705;</div>
                    <div class="fontclass">.quanbushangpin-80</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe71f;</i>
                    <div class="name">编辑</div>
                    <div class="code">&amp;#xe71f;</div>
                    <div class="fontclass">.bianji</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe726;</i>
                    <div class="name">验证码</div>
                    <div class="code">&amp;#xe726;</div>
                    <div class="fontclass">.c-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe70f;</i>
                    <div class="name">加入购物车</div>
                    <div class="code">&amp;#xe70f;</div>
                    <div class="fontclass">.jiarugouwuche</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe70d;</i>
                    <div class="name">最新揭晓</div>
                    <div class="code">&amp;#xe70d;</div>
                    <div class="fontclass">.zuixinjiexiao</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe718;</i>
                    <div class="name">签到</div>
                    <div class="code">&amp;#xe718;</div>
                    <div class="fontclass">.qiandao</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe70c;</i>
                    <div class="name">新揭晓</div>
                    <div class="code">&amp;#xe70c;</div>
                    <div class="fontclass">.xinjiexiao</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe719;</i>
                    <div class="name">最新揭晓1</div>
                    <div class="code">&amp;#xe719;</div>
                    <div class="fontclass">.zuixinjiexiao1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe71a;</i>
                    <div class="name">邀请</div>
                    <div class="code">&amp;#xe71a;</div>
                    <div class="fontclass">.yaoqing</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe71b;</i>
                    <div class="name">消息</div>
                    <div class="code">&amp;#xe71b;</div>
                    <div class="fontclass">.xiaoxi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe71c;</i>
                    <div class="name">向右</div>
                    <div class="code">&amp;#xe71c;</div>
                    <div class="fontclass">.xiangyou</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe71d;</i>
                    <div class="name">记录</div>
                    <div class="code">&amp;#xe71d;</div>
                    <div class="fontclass">.jilu-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe720;</i>
                    <div class="name">三角形</div>
                    <div class="code">&amp;#xe720;</div>
                    <div class="fontclass">.sanjiaoxing</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe721;</i>
                    <div class="name">三角形</div>
                    <div class="code">&amp;#xe721;</div>
                    <div class="fontclass">.sanjiaoxing-copy</div>
                </li>
            
        </ul>


        <div class="helps">
            第一步：使用font-face声明字体
            <pre>
@font-face {font-family: 'iconfont';
    src: url('iconfont.eot'); /* IE9*/
    src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('iconfont.woff') format('woff'), /* chrome、firefox */
    url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
</pre>
第二步：定义使用iconfont的样式
            <pre>
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
</pre>
第三步：挑选相应图标并获取字体编码，应用于页面
<pre>
&lt;i class="iconfont"&gt;&amp;#x33;&lt;/i&gt;
</pre>
        </div>

    </div>
</body>
</html>
